<%@ page import="com.hzqy.web.vo.PmsOrgVo" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"/>
    <meta name="page-view-size" content="1280*720" />
    <title>二级页面</title>
    <%@include file="commons.jsp" %>
    <%@ include file="../../../../commons/turnPage.jsp" %>
    <%@ include file="../../../../commons/common_css_js.jsp" %>
    <%@ include file="../../../../commons/commons_data.jsp" %>
        <%
        String catalogId = request.getParameter("catalogId");
        // 取组织
        String name="";
        String logoPic ="imgs/index/logo.png";
        try{
            PmsOrgVo pmsOrgVo = (PmsOrgVo)session.getAttribute(SessionKey.SESSION_USER_FOR_ORG_INFO);
            if(pmsOrgVo!=null){
                name=pmsOrgVo.getF_po_name();
                if(pmsOrgVo.getF_po_logpicurl()!=null){
                    logoPic=pic_url+pmsOrgVo.getF_po_logpicurl();
                }
            }
        }catch(Exception e){
        }
        String Num = request.getParameter("Num");
        TurnPage tp = new TurnPage(request,session);
        HashMap<String,String> tpHash = tp.isPreUrl(String.valueOf(request.getParameter("Num")));
        String focusId = tp.getValue(tpHash,"focusId","","btn_0");
        String preUrl = tp.getValue(tpHash,"url","","index.jsp");

    %>
    <style type="text/css">
        body {
            background-size: 1280px 720px;
            background-repeat:no-repeat;
            background-color:transparent;
        }
    </style>

</head>
<body style="overflow: hidden">
    <img id="bg_img" style="position: absolute; left: 0px; top: 0px; z-index: 0;" src="imgs/secondpage/blackGold/gold_ditu.png" width="1280" height="720" />
    <div id="pic" style="position: absolute;z-index:20;left:253px;top:123px"><img src="imgs/index/dot.gif" width="998" height="559" /></div>
    <div style="position: absolute;z-index:40;left:253px;top:522px"><img src="imgs/secondpage/zhezhao.png" /></div>

    <a style="position: absolute;left:1150px;top:27px;width: 20px;height: 20px" href="javascript:goBack()" onfocus="btnFocus('back')" onblur="unFocus('back')"></a>
    <img id="back"  src="imgs/secondpage/grayGold/back.png" style="position: absolute;z-index:40;left:1133px;top:17px;display: none">
    <div style="position:absolute;z-index:10;left:30px;top:20px;width: 75px;height: 60px"><img src="<%=logoPic%>" width="75" height="60"/></div>
    <%--标题--%>
    <div id="category_title" style="position:absolute;z-index:10;left:118px;top:34px;font-size:28px;font-weight:bold;font-family:'Microsoft YaHei';color:rgb(226,194,128)"><%=name%></div>
    <%--列表--%>
    <div id="category_list"  ></div>
    <%--内容--%>
    <div id="category_content" ></div>
    <script type="text/javascript">
        var relativePathPrefix ="../../../../";
        var pic_url = "<%=pic_url%>";
        var focusId = '<%=focusId%>';
        var catalogId = '<%=catalogId%>';
        var contentList = null;
        var pageVo = {
            totalCount: 0,
            pageSize: 5,
            pageCount: 0,
            currentIndex: 0
        };
        window.onload = function() {
            var paramJson1 = {};
            paramJson1.id=catalogId;
            paramJson1.f_cp_cprid = "2";
            paramJson1.ispublic = ispublicModel;
            //读取目录数量
            getCatalogContentListCount(relativePathPrefix,paramJson1,content.getContentListCount);

        };
        var content={
            getContentListCount:function(__xmlhttp){
                try{
                    var json;
                    json = Josncheck(__xmlhttp.responseText);
                    if(json&&json.count>0){
                        pageVo.totalCount = json.count;
                        pageVo.pageCount = Math.ceil(pageVo.totalCount / pageVo.pageSize);
                        var paramJson = {};
                        paramJson.id=catalogId;
                        paramJson.startindex = 0;
                        paramJson.count = pageVo.totalCount;
                        paramJson.f_cp_cprid = "2";
                        paramJson.ispublic = ispublicModel;
                        getCatalogContentListById(relativePathPrefix,paramJson,content.getContentList);
                    }
                }catch(e){
                }
            },
            getContentList:function(__xmlhttp){
                try{
                    var json;
                    json = Josncheck(__xmlhttp.responseText);
                    if(json&&json.length>0){
                        contentList = json;
                        insertCategory(json);
                        document.getElementById(focusId).focus();
                    }
                }catch(e){
                }
            }
        }

        function insertCategory(jsonArr){
            var _html = '';
            var startIndex = pageVo.currentIndex;//开始遍历的下标
            var length = jsonArr.length - startIndex >= 5 ? 5 : jsonArr.length - startIndex;//遍历的长度

            for(var i = startIndex; i < startIndex + length; i ++) {
                var json = jsonArr[i];
                var _index = i - startIndex;
                var top = 190+96*_index;
                var top1 = 191+95*_index;
                _html += '<span id="item_' + i + '_text1" style="position: absolute; left: 47px; top: ' +top+ 'px; width: 35px; font-size: 23px;font-weight: bold;font-family: \'Microsoft YaHei\' ;color:white;z-index: 15;" >' + json.f_cc_obligate2 + '</span>';
                _html += '<span id="item_' + i + '_text2" style="position: absolute; left: 88px; top: ' + top1 + 'px; width: 140px; font-size: 18px;font-weight: bold;font-family: \'Microsoft YaHei\' ;color:white;z-index: 15;" >'+ json.f_cc_name +'</span>';
                _html += '<span id="item_' + i + '_text3" style="position: absolute; left: 95px; top: '+(top1+29)+'px;width:150px;font-size: 18px;font-family: \'Microsoft YaHei\';color:white;z-index:16" >'+ json.f_cc_obligate1 +'</span>';
                _html += '<a id="btn_'+ i +'" style="position: absolute;left: 47px;top:'+(top+10)+'px;width: 20px;height: 20px;z-index:40" href="#" onfocus="btnColor('+ i +')" onblur="unColor('+ i +')"></a>';
                _html += '<div id="btn_foc_'+ i +'" style="position: absolute;z-index:70;left: 22px;top:'+(top1-35)+'px;display: none"><img src="imgs/secondpage/grayGold/foc.png"/></div>';
            }
            _html += '<div id="top_foc" style="position:absolute;z-index:70;left: 22px;top:113px;width:239px;height: 61px; display: none"><img src="imgs/secondpage/grayGold/top_foc.png" /></div>';
            _html += '<a id ="top" style="position:absolute;z-index:40;left: 50px;top:130px;width:20px;height: 20px;" href="javascript:pageUp()" onfocus="btnFocus(\'top_foc\')" onblur="unFocus(\'top_foc\')"></a>' ;
            _html += '<div id="bottom_foc" style="position:absolute;z-index:70;left: 22px;top:631px;width:239px;height:61px;display: none"><img src="imgs/secondpage/grayGold/bottom_foc.png" /></div>';
            _html += '<a id ="bottom" style="position:absolute;z-index:40;left: 50px;top:650px;width:20px;height: 20px;" href="javascript:pageDown()" onfocus="btnFocus(\'bottom_foc\')" onblur="unFocus(\'bottom_foc\')"></a>' ;
            document.getElementById('category_list').innerHTML = _html;
        }
        function show(index) {
            var str="";
            str+="<div style='position: absolute;z-index:90;left: 819px;top:540px;width: 200px;height: 28px; font-size: 26px;font-weight: bold;color:white'>"+ contentList[index].f_cc_name;
            str+="<div style='position: absolute;z-index:90;left: 200px;top:10px;width: 220px;height: 20px;font-size: 18px;color:white;font-family: \'Microsoft YaHei\''>"+ contentList[index].f_cc_obligate1+"</div></div>";
            str+="<div style='position: absolute;z-index:90;left: 820px;top:587px;width: 400px;height: 85px;font-size: 18px;color:white;overflow:hidden;font-family: \'Microsoft YaHei\''>"+contentList[index].f_cc_desc+"</div>";
            document.getElementById('category_content').innerHTML = str;
        }
        function btnFocus(id) {
            document.getElementById(id).style.display="block";
        }
        function unFocus(id) {
            document.getElementById(id).style.display="none";
        }
        function btnColor(i) {
            show(i);
            document.getElementById("btn_foc_"+ i ).style.display="block";
            document.getElementById("item_"+ i + "_text1").style.color="rgb(255,120,0)";
            document.getElementById("item_"+ i + "_text2").style.color="rgb(255,120,0)";
            document.getElementById("item_"+ i + "_text3").style.color="rgb(255,120,0)";
            if(contentList[i].f_cc_picurl!=null||contentList[i].f_cc_picurl==""){
                document.getElementById("pic").childNodes[0].src=pic_url+contentList[i].f_cc_picurl;
            }

        }
        function unColor(i) {
            document.getElementById("btn_foc_"+ i ).style.display="none";
            document.getElementById("item_"+ i + "_text1").style.color="#fff";
            document.getElementById("item_"+ i + "_text2").style.color="#fff";
            document.getElementById("item_"+ i + "_text3").style.color="#fff";
        }
        function pageDown() {
            if ((contentList.length - pageVo.currentIndex) <= pageVo.pageSize) {
                return false;
            }
            pageVo.currentIndex ++;
            insertCategory(contentList);

            var lastItemIndex = pageVo.currentIndex + pageVo.pageSize - 1
            lastItemIndex = lastItemIndex >= (contentList.length - 1) ? (contentList.length - 1) : lastItemIndex;
           // document.getElementById('btn_' + lastItemIndex).focus();
            document.getElementById("bottom").focus();
            show(lastItemIndex);
            return true;
        }

        function pageUp() {
            if (pageVo.currentIndex <= 0) {
                return false;
            }

            pageVo.currentIndex --;
            insertCategory(contentList);
            //document.getElementById('btn_' + pageVo.currentIndex).focus();// 上翻页聚焦第一个值
            document.getElementById("top").focus();
            show(pageVo.currentIndex);
            return true;
        }
        function goBack() {
            window.location.href="<%=preUrl%>";
        }
        function grabEvent(evt) {
            var keycode = event.which ? event.which : event.keyCode;

            if(keycode == 8){
                goBack();
            }

/*
            if (keycode == 91) {
                pageUp();
                return false;
            }

            if (keycode == 93) {
                pageDown();
                return false;
            }

            if(document.activeElement.id == ("btn_" + pageVo.currentIndex)){
                if(keycode==38){
                    if(pageUp()) {
                        // 如果可以翻页 则阻止事件
                        return false;
                    }
                }
            }

            if(document.activeElement.id == ("btn_" + (pageVo.currentIndex + pageVo.pageSize - 1))){
                if(keycode==40){
                    if(pageDown()) {
                        // 如果可以翻页 则阻止事件
                        return false;
                    }
                }
            }*/

        }
        document.onkeypress=grabEvent;
        document.onirkeypress=grabEvent;
    </script>
</body>
</html>
